<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>-->


    <link href="/lib/video-js.css" rel="stylesheet"/>
    <script src="/lib/video.js" type="text/javascript"></script>

    <!-- <link href="http://vjs.zencdn.net/vjs-version/video-js.css" rel="stylesheet"> -->

    <!--<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>-->
    <!--<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>-->

    <!--<link rel="stylesheet" type="text/css" href="/lib/slicebox/slicebox.css" />-->
    <link rel="stylesheet" type="text/css" href="/lib/bootstrap.ext.css" />

    <script type="text/javascript" src="/lib/slicebox/modernizr.custom.46884.js"></script>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet"
  href="/lib/animate.min.css">


    <style type="text/css">
  #overlay {
      position: absolute;
      bottom: 30px;
      width:100%;
      text-align: center;
      font-size: 20px;
      z-index: 2147483647;
    }

#overlayStat {
    /*position: absolute;*/
    /*top: 50px;*/
    color: white;
    width:100%;
    text-align: center;
    font-size: 20px;
    z-index: 2147483647;
    margin-bottom:20pt;
}

.stat-content{
    height:60pt;
    /*background-color: rgba(221, 221, 221, 0.3);3*/
}

  #overlayCountdown {
      position: absolute;
      right: 30px;
      bottom:30px;
      width:100%;
      text-align: right;
      font-size: 50px;
      z-index: 2147483649;
  }
    
.vjs-default-skin.vjs-paused .vjs-big-play-button
{
    display: none;
}
.img-mood-emotion{
    width:198pt;
    height:60pt;
    border:0;
    margin:15pt;
    background-color:transparent;
}

  .img-mood-emotion-img{
      width:154pt;
      height:60pt;
      margin-bottom:20pt;
  }

.img-emotion{
    width:100pt;
}
.transition-img{
    width:150pt;
    height:150pt;
}
.div-emotion{
    text-align: center;
}

  .div-stat{
      /*padding: 8pt;*/
      font-size:20pt;
      width:100%;
      font-family: "楷体","楷体_GB2312";
      color:white;
  }
  .text-stat{
      /*padding-top:1pt;*/
      /*padding-bottom:1pt;*/
      font-size:22pt;
      color:white;
  }

  .center-text-countdown{
      font-family: "楷体","楷体_GB2312";
      font-size:150pt;
      color:white;
      margin-left:335pt;
  }

  .center-text-waiting{
      font-family: "楷体","楷体_GB2312";
      font-size:160pt;
      color:white;
      margin-left:495pt;
  }

  .center-text-countdown-finish{
      font-family: "楷体","楷体_GB2312";
      font-size:110pt;
      color:white;
      margin-left:550pt;
  }

  .div-transition{
      /*padding: 0pt;*/
      /*border: 0pt;

      */
      width:185pt;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      /*border:1px solid #000;*/
  }

  .rotate {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);

      /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;

      /* Should be unset in IE9+ I think. */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }

  .vertical-center {

      display: flex;
      align-items: center;
  }

  ::-webkit-scrollbar{
      display:none;
  }
    </style>



</head>
<body style="background-color:black ">

<div id="consoleLog" ></div>


<div class=" vertical-center stat-content">

    <div id="overlayStat" class="row text-center" >

            <div class="text-center">

                <div class="col-md-1-14 text-center">
                    <div id="divStat1" class="div-stat rotate center-block">惊讶</div>
                </div>
                <div class="col-md-1-14 text-center">
                    <div id="textStat1" class="text-stat rotate center-block">0</div>
                </div>

                <div class="col-md-1-14 text-center" >
                    <div id="divStat2" class="div-stat rotate" >高兴</div>
                </div>
                <div class="col-md-1-14 text-center" >
                    <div id="textStat2" class="text-stat rotate" >0</div>
                </div>

                <div class="col-md-1-14 text-center">
                    <div id="divStat3" class="div-stat rotate center-block">平静</div>
                </div>
                <div class="col-md-1-14 text-center">
                    <div id="textStat3" class="text-stat rotate center-block">0</div>
                </div>

                <div class="col-md-1-14 text-center">
                    <div id="divStat4" class="div-stat rotate">伤心</div>
                </div>
                <div class="col-md-1-14 text-center">
                    <div id="textStat4" class="text-stat rotate">0</div>
                </div>

                <div class="col-md-1-14 text-center" >
                    <div id="divStat5" class="div-stat rotate">厌恶</div>
                </div>
                <div class="col-md-1-14 text-center">
                    <div id="textStat5" class="text-stat rotate">0</div>
                </div>

                <div class="col-md-1-14 text-center">
                    <div id="divStat6" class="div-stat rotate">生气</div>
                </div>
                <div class="col-md-1-14 text-center">
                    <div id="textStat6" class="text-stat rotate">0</div>
                </div>

                <div class="col-md-1-14 text-center" >
                    <div id="divStat7" class="div-stat rotate">害怕</div>
                </div>
                <div class="col-md-1-14 text-center" >
                    <div id="textStat7" class="text-stat rotate">0</div>
                </div>

            </div>
    </div>

</div>

<div id="divTransition" class="row"  style="background-color:transparent;padding:0pt;margin-left:15pt;margin-top:100pt;height:270pt;" >

    <div class="col-md-1-5 div-transition text-center" style="background-color:transparent">
        <img id="imgMood1"  class="img-mood-emotion-img" style="background-color:transparent">
        <img class="transition-img" id="transition-1" src="http://localhost:8088/res/2018-02-25_01.36.36_cut__1519493799039.png"></img>
    </div>
    <div class="col-md-1-5 div-transition" >
        <img id="imgMood2" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-2" src="http://localhost:8088/res/2018-02-25_01.36.36_cut__1519493799039.png"></img>
    </div>
    <div class="col-md-1-5 div-transition" >
        <img id="imgMood3" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-3" src="http://localhost:8088/res/2018-05-04_10.04.12_cut__1525399458705.png"></img>
    </div>
    <div class="col-md-1-5 div-transition">
        <img id="imgMood4" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-4" src="http://localhost:8088/res/2018-05-04_10.04.12_cut__1525399458705.png"></img>
    </div>
    <div class="col-md-1-5 div-transition">
        <img id="imgMood5" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-5" src="http://localhost:8088/res/2018-05-04_10.04.12_cut__1525399458705.png"></img>
    </div>


</div>

<div id="divWaiting" class="row"  style="background-color:transparent;height:100pt;">

    <div class="col-xs-1">

    </div>
    <div class="col-xs-10 text-center rotate" >
        <div  class="center-text-waiting">你<br/>好<br/>吗</div>
    </div>

    <div class="col-xs-1">

    </div>

</div>

<div id="divCountdown" class="row"  style="background-color:transparent;height:100pt;" >

    <div class="col-xs-1">

    </div>
    <div class="col-xs-10 text-center rotate" >
        <div id="textCountdown" class="center-text-countdown">3</div>
    </div>

    <div class="col-xs-1">

    </div>
</div>


<div id="divCountdownFinish" class="row"  style="background-color:transparent;height:100pt;">

    <div class="col-xs-1">

    </div>
    <div class="col-xs-10 text-center rotate" style="background-color:transparent">
        <div class="center-text-countdown-finish" style="padding-top:0pt;">你<br/>心<br/>情<br/>好<br/>吗</div>
    </div>

    <div class="col-xs-1">

    </div>
</div>




<script src="/lib/socket.io.js"></script>
<script src="/lib/moment.min.js"></script>
<script src="/js/app.js"></script>
<script src="/lib/jquery-2.1.4.min.js"></script>
<!--<script src="/lib/slicebox/jquery.slicebox.js"></script>-->

<!--<script src='/lib/transition/three.min.js'></script>-->
<!--<script src='/lib/transition/TweenMax.min.js'></script>-->
<!--<script src='/lib/transition/bas.js'></script>-->
<!--<script src='/lib/transition/OrbitControls-2.js'></script>-->
<!--<script src="/lib/transition/transition.js"></script>-->

<script>

    window.onload = function(){
        // load(0,'transition-1');
        // load(1,'transition-2');
        // load(2,'transition-3');
        // load(3,'transition-4');
        // load(4,'transition-5');
    };


    var socket =  io.connect(ServerUrl);

    var imageIndex = 0;
    var cdinterval;


    socket.on('connect', function() {
        console.log("Client has connected to the server!");
        ifHavePeople = false;
        $("#imgMood").hide();
        $("#divWaiting").show();
        $("#divTransition").hide();
        $("#divCountdown").hide();
        $("#divCountdownFinish").hide();
    });

    socket.on('lock', function() {
        console.log("server is locked");

        $("#imgMood").hide();
        $("#divWaiting").hide();
        $("#divTransition").hide();
        $("#divCountdown").show();
        $('#textCountdown').html("不<br/>在<br/>服<br/>务");
        $("#divCountdownFinish").hide();
    });

    socket.on('next-round', function(data) {
        ifHavePeople = false;
        $("#imgMood").hide();
        $("#divWaiting").show();
        $("#divTransition").hide();
        $("#divCountdown").hide();
        $("#divCountdownFinish").hide();
    });

    var ifHavePeople = false;
    socket.on('people', function(data) {
        if(data.result.hasOwnProperty("faces") == false){
            ifHavePeople = false;
            $("#imgMood").hide();
            $("#divWaiting").show();
            $("#divTransition").hide();
            $("#divCountdown").hide();
            $("#divCountdownFinish").hide();
        }else{
            var faces = data.result.faces;
            if(faces.length  > 0 ){
                ifHavePeople = true;
                countdown();
            }else{
                $("#imgMood").hide();
                $("#divWaiting").show();
                $("#divTransition").hide();
                $("#divCountdown").hide();
                $("#divCountdownFinish").hide();
            }
        }
    });

    socket.on('face', function(data) {

        var faces = data.result.faces;

        $("#imgMood").show();
        $("#divTransition").show();
        $("#divCountdown").hide();
        $("#divCountdownFinish").hide();
        $("#divWaiting").hide();

        $('#imgMood1').hide();
        $('#imgMood2').hide();
        $('#imgMood3').hide();
        $('#imgMood4').hide();
        $('#imgMood5').hide();

        $('#transition-1').hide();
        $('#transition-2').hide();
        $('#transition-3').hide();
        $('#transition-4').hide();
        $('#transition-5').hide();

        initStat(data.stat);

//        if(faces.length == 0){
//            countdown();
//        }

        var faces = data.result.faces;

        var faceCount = faces.length > FaceCount ? FaceCount : faces.length;

        for(var i = 0 ; i < faceCount ; ++i)
        {
            var face = faces[i];

            var emotion = face.attributes.emotion;
            var emotionText = "";
            if(emotion.surprise > 60){
                emotionText = "surprise.png";
            }
            else if(emotion.happiness > 60){
                emotionText = "happy.png";
            }
            else if(emotion.neutral > 60){
                emotionText = "natural.png";
            }
            else if(emotion.sadness > 60){
                emotionText = "sad.png";
            }
            else if(emotion.disgust > 60){
                emotionText = "disgust.png";
            }
            else if(emotion.anger > 60){
                emotionText = "angry.png";
            }
            else if(emotion.fear > 60){
                emotionText = "fear.png";
            }else{
                emotionText = "natural.png";
            }

            var index = parseInt((FaceCount - faceCount)/2 + i + 1);
            console.log("face index " + index )
            $('#transition-' + index).show();
            $('#transition-' + index).attr('src',ResUrl + face.face_photo);
            $('#transition-' + index).addClass('animated bounceIn ');

            $('#imgMood'+  index).show();
            $('#imgMood' + index).attr('src',ResImgUrl + emotionText);
            $('#imgMood' + index).addClass('animated fadeInUp ');

        }
    });



    socket.on('disconnect', function() {
        console.log("The client has disconnected!");
    });

    function sendDisconnect() {
        socket.disconnect();
    }

    function sendMessage() {


        var jsonObject = {};
        socket.emit('chatevent', jsonObject);
    }

    function faceDetect(){

        var jsonObject = {};

        socket.emit('face', jsonObject);

    }

    $("#divWaiting").hide();
    $("#imgMood").hide();
    $("#divTransition").hide();
    $("#divCountdown").hide();
    $("#divCountdownFinish").hide();

    // $("#divWaiting").hide();
    // $("#imgMood").hide();
    // $("#divTransition").hide();
    // $("#divCountdown").hide();
    // $("#divCountdownFinish").show();


    var cdPeopleCheck;
    var peopleCheckCount = 0;
    function countdownPeopleCheck(){

        clearInterval(cdPeopleCheck);
        cdPeopleCheck = setInterval(function(){
            peopleCheckCount += 1;
            if(ifHavePeople == false){
                var jsonObject = {};
                socket.emit('people', jsonObject);
                peopleCheckCount = 0;
            }

            if(peopleCheckCount >=  10 && ifHavePeople){
                ifHavePeople = false;
            }
        },6000)
    }
    countdownPeopleCheck();

    function countdown(){

        $("#imgMood").hide();
        $("#divWaiting").hide();
        $("#divTransition").hide();
        $("#divCountdown").show();
        $('#textCountdown').html("");
        $("#divCountdownFinish").hide();

        $('#imgMood1').removeClass('animated fadeInUp');
        $('#imgMood2').removeClass('animated fadeInUp');
        $('#imgMood3').removeClass('animated fadeInUp');
        $('#imgMood4').removeClass('animated fadeInUp');
        $('#imgMood5').removeClass('animated fadeInUp');

        $('#transition-1').removeClass('animated bounceIn');
        $('#transition-2').removeClass('animated bounceIn');
        $('#transition-3').removeClass('animated bounceIn');
        $('#transition-4').removeClass('animated bounceIn');
        $('#transition-5').removeClass('animated bounceIn');

        var countdown = 3;
        clearInterval(cdinterval);
        cdinterval = setInterval(function(){

            $('#textCountdown').html(countdown.toString());

            console.log("countdown " + countdown );
            countdown -= 1;

            if(countdown < 0){
                clearInterval(cdinterval);
                $("#divCountdown").hide();
                $("#divCountdownFinish").show();
                setTimeout(function() {
                    faceDetect();
                },1000);
            }
        },1000)
    }


    function initStat(stat){
        $('#divStat1').text("惊讶");
        $('#divStat2').text("高兴");
        $('#divStat3').text("平静");
        $('#divStat4').text("伤心");
        $('#divStat5').text("厌恶");
        $('#divStat6').text("生气");
        $('#divStat7').text("害怕");

        $('#textStat1').text(stat.surprise);
        $('#textStat2').text(stat.happiness);
        $('#textStat3').text(stat.neutral);
        $('#textStat4').text(stat.sadness);
        $('#textStat5').text(stat.disgust);
        $('#textStat6').text(stat.anger);
        $('#textStat7').text(stat.fear);
    }




</script>
</body>
</html>